<template>
  <div class="w-full">
    <SkeletonLoading v-show="initLoading" />
    <div v-show="!initLoading">
      <div class="assets-wrapper flex w-full">
        <div class="flex flex-col w-full">
          <div class="flex flex-col">
            <!-- 车辆总数、总资产 -->
            <div class="flex mb-4">
              <div class="flex" :class="{ 'ml-10': index == 1 }" v-for="(item, index) in summaryData.totalList" :key="index">
                <div class="name">
                  <span class="text-white font-semibold text-2xl mr-3">{{ item.name }}</span>
                </div>
                <div class="text-white font-semibold text-2xl" v-if="index === 0">
                  <span>{{ item.count }} 辆</span>
                </div>
                <div class="flex text-white font-semibold text-2xl items-center" v-if="index === 1">
                  <span class="mr-1">{{ formatNumber(item.totalAmount, true) }} 元</span>
                  <a-tooltip :placement="'bottom-right'">
                    <template #content>
                      <div v-for="i in questionData" :key="i">{{ i }}</div>
                    </template>
                    <icon-question-circle :size="20" class="text-white" />
                  </a-tooltip>
                </div>
              </div>
            </div>
            <!-- 车辆总数、总资产 end -->
            <div class="flex flex-wrap gap-5">
              <Card bigSize v-for="item in summaryData.carStatisticsList" :key="item.name" hover @click="onPageJumpClick(item, item.count)">
                <div class="flex items-center">
                  <CardCellIcon :label="item.name" :icon="IconComputed(item.name)">
                    <CardTotal :value="item.count" unit="辆" color="green" />
                  </CardCellIcon>
                </div>
                <a-divider :margin="16" style="border-color: #e7e7e7" />
                <CardCellIcon label="总资产" icon="asset-total" v-if="!item.name?.includes('借入')">
                  <CardTotal :value="item.totalAmount" color="green" />
                </CardCellIcon>
                <div v-else style="height: 16px"></div>
              </Card>
            </div>
          </div>
        </div>
      </div>

      <CardDivider />

      <!-- 门店车辆数统计 -->
      <CardWrap title="门店车辆数统计" divider>
        <template v-if="summaryData.siteStatisticsList.length">
          <Card
            hover
            type="meta-card"
            v-for="item in summaryData.siteStatisticsList"
            :key="item.siteId"
            :title="item.siteName"
            icon="asset-store"
            @click="onPageJumpClick(item)"
          >
            <CardCell label="车辆数" :value="item.count" unit="辆" />
          </Card>
        </template>
        <CardEmpty v-else description="根据您的筛选统计数据时发现暂无数据，请重新筛选" class="w-full" />
      </CardWrap>

      <CardWrap>
        <CardEmpty description="新数据维度正在开发中，敬请期待" />
      </CardWrap>
    </div>
  </div>
</template>
<script setup lang="ts">
  import SkeletonLoading from '../components/skeleton-loading.vue'
  import Card from '../components/card/index.vue'
  import CardCell from '../components/card/card-cell.vue'
  import CardWrap from '../components/card/card-wrap.vue'
  import CardEmpty from '../components/card/card-empty.vue'
  import CardDivider from '../components/card/card-divider.vue'
  import CardTotal from '../components/card/card-total.vue'
  import CardCellIcon from '../components/card/card-cell-icon.vue'

  import { totalAssetStatistics } from '@/api/dashboard/revenueSummary'
  import { formatNumber } from '@/utils'
  import { ref } from 'vue'

  const props = defineProps({
    // 跳转函数
    nav2WithCode: {
      type: Function,
      required: true,
    },
    // 更新数据更新时间
    refreshUpdateTime: {
      type: Function,
      required: true,
    },
  })

  const emits = defineEmits(['loadDataComplete'])

  // 问号内容
  const questionData = ref([
    '1、总资产：车辆状态为空闲可租、租赁中、运维中、已借出车辆的购置费、购置补充费之和',
    '2、车辆数：运营状态为空闲可租、租赁中、运维中、已借出且来源为自有、借调（借入）、挂靠/托管、融资租赁的车辆数之和',
    '3、此处展示当前最新车辆数及资产总额，不受时间筛选影响',
  ])
  /**
   * 跳转页面
   * @param mode 跳转模式
   * @param extraData 额外参数
   */
  const onPageJumpClick = (extraData: any, carNumber?: number) => {
    // 点击的是门店 id
    if (extraData.siteId) {
      props.nav2WithCode('carManage', extraData)
    } else {
      if (carNumber && carNumber > 0) {
        props.nav2WithCode('carManage', extraData)
      }
    }
  }

  const IconComputed = (name: string) => {
    if (name == '自有') {
      return 'asset-own'
    } else if (name?.includes('借入')) {
      return 'asset-borrow'
    } else if (name == '融资租赁') {
      return 'asset-finance'
    } else if (name == '挂靠/托管') {
      return 'asset-manage'
    }
  }

  // 获取总资产统计
  const summaryData = ref<any>({
    carStatisticsList: [
      {
        totalList: [],
      },
    ],
    siteStatisticsList: [],
  })
  const carSourceList: any = {
    自有: 1,
    借入: 2,
    '融资/租赁': 3,
    '挂靠/托管': 4,
  }

  const initLoading = ref(true)
  const loadData = (params: any = {}) => {
    const queryParam = {
      siteIdList: params.siteIdList,
    }
    summaryData.value = {
      totalList: [],
      carStatisticsList: [],
      siteStatisticsList: [],
    }

    totalAssetStatistics(queryParam).then((res) => {
      res.result.carStatisticsList.forEach((item: any) => {
        if (item.name === '总资产') {
          summaryData.value.totalList.push({
            name: '车辆总数',
            count: item.count,
          })
          summaryData.value.totalList.push({
            name: item.name,
            totalAmount: item.totalAmount,
          })
        } else {
          summaryData.value.carStatisticsList.push({
            name: item.name,
            type: carSourceList[item.name],
            totalAmount: item.totalAmount,
            count: item.count,
          })
        }
      })
      summaryData.value.siteStatisticsList = res.result.siteStatisticsList
      // 更新数据更新时间
      props.refreshUpdateTime(res.result.lastUpdateTime)
      initLoading.value = false

      emits('loadDataComplete')
    })
  }

  defineExpose({
    loadData,
  })
</script>
<style lang="less" scoped>
  .assets-wrapper {
    margin-top: 20px;
    margin-bottom: 30px;
    position: relative;
    min-height: 208px;
    padding: 20px 20px;
    background: linear-gradient(90deg, #49b974 0%, #1ac578 100%);
    box-shadow: 0px 16px 24px -15px rgba(85, 219, 142, 0.65);
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;

    .car-statistics-item {
      width: calc(25% - 18px);
      min-width: 300px;
      padding: 20px 16px;
      background-color: rgba(255, 255, 255);
      border-radius: 4px 4px 4px 4px;
    }

    .total-box {
      position: relative;
      width: 30%;
      min-width: 330px;
      height: 100%;
    }

    .line-wrapper {
      .line-left,
      .line-right {
        position: absolute;
        right: 0;
        width: 1px;
        height: 8px;
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
      }
      .line-left {
        top: 0;
      }
      .line-right {
        bottom: 0;
      }
      .icon {
        position: absolute;
        top: 32%;
        transform: translateY(-50%);
        right: -8px;
      }
    }
  }

  .count-text {
    color: #00b42a;
  }

  .is-link {
    &:hover {
      text-decoration: underline;
      cursor: pointer;
      color: #1890ff;

      .count-text {
        color: #1890ff;
      }

      .unit {
        color: #000;
      }
    }
  }
</style>
